<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col" style="border: 1px solid #000;">
        <h5 class="text-primary">文本对齐样式</h5>
        <p class="text-start">左对齐，默认由浏览器决定</p>
        <p class="text-center">居中对齐</p>
        <p class="text-end">右对齐</p>
      </div>
      <div class="col" style="border: 1px solid #000;">
        <h5 class="text-primary">文本变换样式</h5>
        <p class="text-uppercase">用于将文本的所有字母hello转换为大写形式</p>
        <p class="text-lowercase">用于将文本的所有字母HELLO转换为小写形式</p>
        <p class="text-capitalize">用于将文本的首字母hello world转换为大写形式</p>
      </div>
    </div>
    <div class="row">
      <div class="col" style="border: 1px solid #000;">
        <h5 class="text-primary">文本换行样式</h5>
        <p class="text-nowrap" style="width: 5rem; border: 1px dashed #999;">用于禁止文本自动换行</p>
        <p class="text-wrap" style="width: 5rem; border: 1px dashed #999;">用于允许文本换行</p>
        <p class="text-break" style="width: 10rem; border: 1px dashed #999;">用于在文本超出容器宽度时进行换行或断行处理</p>
        <p class="text-truncate" style="width: 10rem; border: 1px dashed #999;">用于截断文本并显示省略号</p>
      </div>
      <div class="col" style="border: 1px solid #000;">
        <h5 class="text-primary">文本字体样式</h5>
        <p class="fw-bold">用于将文本加粗显示，默认粗体</p>
        <p class="fw-bolder">用于将文本加粗显示，比默认粗体略粗</p>
        <p class="fw-normal">用于将文本恢复为默认的字体粗细程度</p>
        <p class="fw-light">用于将文本显示为轻字体（较细）</p>
        <p class="fw-lighter">用于将文本显示为更轻的字体（更细）</p>
        <p class="fst-italic">用于将文本显示为斜体</p>
        <p class="fst-normal">用于将文本的字体样式恢复为普通，默认没有斜体</p>
      </div>
    </div>
    <div class="row">
      <div class="col" style="border: 1px solid #000;">
        <h5 class="text-primary">文本装饰样式</h5>
        <a href="#">链接，默认带有下划线</a><br>
        <a href="#" class="text-decoration-none">用于去除文本的装饰效果。去除了链接的下划线</a>
        <p class="text-decoration-underline">用于在文本下方添加下划线</p>
        <p class="text-decoration-line-through">用于为文本添加删除线</p>
      </div>
    </div>
  </div>
</body>
</html>